<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    li{
        list-style: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="compute">计算总分和平均分</button>
    <button @click="Greater">筛选及格</button>
    <button @click="Less">筛选不及格</button>
    <button @click="ALL">显示全部</button>
    <button @click="sortAsc">按成绩正序排序</button>
    <button @click="sortDesc">按成绩倒序排序</button>
    <input type="text" v-model="addName" placeholder="添加学生姓名">
    <input type="number" v-model="addScore" placeholder="添加学生成绩">
    <button @click="addStudent">添加学生</button>
    <input type="text" v-model="deleteSName" placeholder="删除学生姓名">
    <button @click="deleteStudent">删除学生</button>
    <input type="text" v-model="modifySName" placeholder="修改分数的学生姓名">
    <input type="number" v-model="modifyScore" placeholder="新分数">
    <button @click="modifyStudent">修改分数</button>
    <input type="text" v-model="searchName" placeholder="搜索学生姓名">
    <button @click="searchStudent">搜索</button>
    <ul>
      <li v-for="student in displadata" :key="student.name">{{student.name}}: {{student.score}}</li>
    </ul>
    <p v-if="toage">{{`总分: ${toage.total}, 平均分: ${toage.average}`}}</p>
    <p v-if="result">{{result}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  <script>
    new Vue({
      el: '#app',
      data: {
        students: [
          { name: '周贵妃', score: 85 },
          { name: '王星源', score: 55 },
          { name: '老黑', score: 70 }
        ],
        addName: '',
        addScore: '',
        deleteSName: '',
        modifySName: '',
        modifyScore: '',
        searchName: '',
        displadata: [],
        toage: null,
        result: ''
      },
      methods: {
        // 1. 计算总分和平均分
        compute() {
          const total = this.students.reduce((acc, student) => acc + student.score, 0);
          const average = total / this.students.length;
          this.toage = { total, average };
          this.displadata = this.students;
        },
        // 2. 筛选功能
        Greater() {
          this.displadata = this.students.filter(student => student.score >= 60);
        },
        Less() {
          this.displadata = this.students.filter(student => student.score < 60);
        },
        ALL() {
          this.displadata = this.students;
        },
        // 3. 排序功能
        sortAsc() {
          this.displadata = [...this.students].sort((a, b) => a.score - b.score);
        },
        sortDesc() {
          this.displadata = [...this.students].sort((a, b) => b.score - a.score);
        },
        // 4. 增加、删除、修改学生功能
        addStudent() {
          if (this.addName && this.addScore) {
            this.students.push({ name: this.addName, score: parseInt(this.addScore) });
            this.displadata = this.students;
            this.addName = '';
            this.addScore = '';
          }
        },
        deleteStudent() {
          const index = this.students.findIndex(student => student.name === this.deleteSName);
          if (index!== -1) {
            this.students.splice(index, 1);
            this.displadata = this.students;
            this.deleteSName = '';
          }
        },
        modifyStudent() {
          const student = this.students.find(student => student.name === this.modifySName);
          if (student) {
            student.score = parseInt(this.modifyScore);
            this.displadata = this.students;
            this.modifySName = '';
            this.modifyScore = '';
          }
        },
        // 5. 搜索功能
        searchStudent() {
          const student = this.students.find(student => student.name === this.searchName);
          if (student) {
            this.result = `找到学生: ${student.name}, 成绩: ${student.score}`;
          } else {
            this.result = `未找到学生 ${this.searchName}`;
          }
        }
      },
      created() {
        this.displadata = this.students;
      }
    });
  </script>
</body>

</html>